// components/Steps/Step.tsx
import { View } from '@tarojs/components';
import React, { ReactNode } from 'react';
import './index.scss';

export interface StepProps {
  leftTitle?: string | ReactNode;
  leftDescription?: string | ReactNode;
  rightTitle?: string | ReactNode;
  rightDescription?: string | ReactNode;
  isLast?: boolean;
  // 只有右边有内容
  onlyRight?: boolean;
  isActive?: boolean;
}

const Step: React.FC<StepProps> = ({
  leftTitle,
  leftDescription,
  rightTitle,
  rightDescription,
  isLast = false,
  onlyRight = false,
  isActive = false,
}) => {
  return (
    <View className="step-item">
      {/* 左侧 */}
      {!onlyRight && (
        <View className="step-side left">
          {leftTitle && <View className="step-title">{leftTitle}</View>}
          {leftDescription && (
            <View className="step-desc">{leftDescription}</View>
          )}
        </View>
      )}

      {/* 中间节点 */}
      <View className="step-center">
        <View className={`step-circle ${isActive ? 'active' : ''}`} />
        {!isLast && <View className="step-line" />}
      </View>

      {/* 右侧 */}
      <View className="step-side right">
        {rightTitle && <View className="step-title">{rightTitle}</View>}
        {rightDescription && (
          <View className="step-desc">{rightDescription}</View>
        )}
      </View>
    </View>
  );
};

export default Step;
